<template>
  <!-- 弹窗登陆 -->
  <van-popup v-model="showPanel"
             round
             closeable
             position="bottom"
             class="popup-login">

    <van-form class="login-form"
              @submit="onSubmit">
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-1.png')" />
        <van-field v-model="phone"
                   name="phone"
                   placeholder="请输入手机号"
                   :rules="phoneRules"
                   clearable />
      </div>
      <div class="flex solid-bottom">
        <van-icon class="form-icon"
                  :name="require('@/assets/image/login-form-icon-2.png')" />
        <van-field v-model="captcha"
                   name="captcha"
                   placeholder="请输入验证码"
                   :rules="[{ required: true, message: '请输入验证码' }]"
                   clearable>
          <van-button slot="button"
                      size="small"
                      type="default"
                      class="send-sms"
                      native-type="button"
                      :disabled="this.waitTime < 60"
                      @click="sendCode">{{smsBtnText}}</van-button>
        </van-field>
      </div>

      <van-button type="default"
                  class="login-btn"
                  native-type="submit"
                  round
                  block>登录</van-button>
    </van-form>
  </van-popup>
</template>

<script>
import { getSms } from '@/api/common'
import { phoneRules, checkFn } from '@/utils/formRules'
import { smsLoginRegister } from '@/api/login'
import { mapMutations } from 'vuex'
export default {
  name: 'LoginPopup',
  data() {
    return {
      waitTime: 60, // 登陆的短信倒计时
      phoneRules: Object.freeze(phoneRules),
      showPanel: false, // 显示登陆弹窗
      captcha: '', // 登陆验证码
      phone: '', // 登陆手机号
      inviter_id: this.$route.query.inviter_id || '' // 分享人ID
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  created() {
    this.showPanel = this.show
  },
  watch: {
    /**
     * 父组件传递过来的值改变
     * 联动组件内的show进行显示
     */
    show(newVal, oldVal) {
      this.showPanel = newVal
    },
    /**
     * 监听组件内的状态修改
     * 然后触发父页面的状态修改
     */
    showPanel(newVal, oldVal) {
      this.$emit('clickMask', newVal)
    }
  },
  /**
   * v-model绑定对应的方法，和修改的方法
   */
  model: {
    prop: 'show',
    event: 'clickMask'
  },
  computed: {
    smsBtnText() {
      return this.waitTime < 60 ? this.waitTime : '获取验证码'
    }
  },
  methods: {
    ...mapMutations({
      memberLogin: 'memberLogin'
    }),

    sendCode() {
      // 验证手机号
      let { state, error } = checkFn(phoneRules, this.phone)

      if (!state) {
        getSms(2, this.phone)
          .then(res => {
            this.$toast({
              message: '发送成功',
              type: 'success'
            })
            let interval = setInterval(() => {
              if (this.waitTime === 0) {
                clearInterval(interval)
                this.waitTime = 60
              } else this.waitTime--
            }, 1000)
          })
          .catch(res => {
            this.$toast({
              message: res.message,
              type: 'fail',
              duration: 3000
            })
          })
      } else {
        this.$toast({
          message: error,
          type: 'fail',
          duration: 3000
        })
      }
    },

    /**
     * 提交登陆
     */
    onSubmit(formData) {
      formData.inviter_id = this.inviter_id
      smsLoginRegister(formData)
        .then(res => {
          // 更新vuex的值
          this.memberLogin({ token: res.result.token, info: res.result.info })
          this.$emit('loginSuccess')
          this.$toast({
            type: 'success',
            message: res.message || '登录成功'
          })
        })
        .catch(res => {
          this.$toast({
            type: 'fail',
            message: res.message || '登录失败，请重试'
          })
        })
    }
  }
}
</script>

<style lang="scss">
.popup-login {
  padding: 45px 0px;
  // 弹窗登陆
  .login-form {
    font-size: 18px;
    padding: 0 40px;
    .form-icon {
      padding-top: 0.4rem;
    }
    /deep/ .van-cell {
      background-color: transparent;
      padding-left: 0.4rem;
      padding-right: 0rem;
    }
    .send-sms {
      border-color: transparent transparent transparent #e5e5e5;
      color: #999999;
      font-size: 16px;
      height: 100%;
    }

    .login-btn {
      background-color: $mainColor;
      color: #ffffff;
      margin-top: 30px;
    }
  }
}
</style>
